@use '../../../../scss/constants' as *;

.white-header {
  background-color: white !important;
  color: $cne-neutral-medium !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  
  mat-icon {
    color: $cne-neutral-medium !important;
  }
  
  span {
    color: $cne-neutral-medium !important;
  }
  
  button:hover {
    background-color: rgba(0, 0, 0, 0.02) !important;
  }
  
  button {
    color: $cne-neutral-medium !important;
  }
}

.notification-menu {
  width: 560px;
  max-height: 520px;

  .menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;

    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 500;
    }
  }

  .notification-list { max-height: 420px; overflow-y: auto; }

  .notification-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);

    &:hover {
      background-color: rgba(0, 0, 0, 0.04);
    }

    .notification-icon { font-size: 24px; width: 24px; height: 24px; color: #f44336; }
    .notification-icon.warn { color: #f44336; }

    .notification-content { flex: 1; }
    .notification-title { font-size: 16px; font-weight: 600; color: rgba(0,0,0,.87); margin-bottom: 4px; }
    .notification-message { font-size: 14px; color: rgba(0,0,0,.6); }

    .notification-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
    .notification-time { font-size: 12px; color: rgba(0,0,0,.45); }
    .notification-status { font-size: 20px; color: rgba(0,0,0,.38); }
  }

  .menu-footer { padding: 12px 16px; text-align: center; }
}
